<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/main.css">
  <title>登录界面</title>
</head>
<body>
  <div class="main">
    <div class="login-box">
      <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </div>
      <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
      </div>
      <div class="login">
        <div class="login-title">LOGIN</div>
          <input type="text" class="username-input" placeholder="用户名" id="login-username-input" name="login-username"></input>
          <input type="password" class="userpwd-input" placeholder="密码" id="login-userpwd-input" name="login-userpwd"></input>
          <button class="login-btn">登录</button>
      </div>
      <div class="goToLogin">
        <div class="goToLogin-title">欢迎来到注册界面</div>
        <img src="./assets/imgs/toLogin.png" alt="" style="width: 300px;height: 300px;margin-top: 10px;display: block;" >
        <div class="had-account">已有账号？</div>
        <button style="width: 60px;height: 30px;margin-top: 20px;background-color: #fff;border: 1px solid #999;border-radius: 3px;" id="goToLogin-btn">
          去登录
        </button>
      </div>
      <div class="register">
        <div class="register-title">REGISTER</div>
        <form action="#" class="register-form">
          <input type="text" class="username-input" placeholder="用户名" id="register-username-input" name="register-username"></input>
          <input type="text" class="username-input" placeholder="邮箱" id="register-email-input" name="register-email"></input>
          <input type="password" class="userpwd-input" placeholder="密码" id="register-userpwd-input" name="register-userpwd"></input>
          <input type="password" class="userpwd-input" placeholder="确认密码" id="register-confirm-userpwd-input" name="register-confirm-userpwd"></input>
          <!-- 不加type="button"页面会自动刷新 -->
          <button class="register-btn" type = "button">注册</button>
        </form>
      </div>
      <div class="goToRegister"> 
        <div class="goToRegister-title">欢迎来到注册界面</div>
        <img src="./assets/imgs/toRegister.png" alt="" style="width: 300px;height: 300px;margin-top: 10px;display: block;" >
        <div class="had-account">还未注册？</div>
        <button style="width: 60px;height: 30px;margin-top: 20px;background-color: #fff;border: 1px solid #999;border-radius: 3px;" id="goToRegister-btn">
          去注册
        </button>
      </div>
    </div>
  </div>
</body>

<script>

const goToRegister_btn = document.getElementById('goToRegister-btn');
const goToLogin_btn = document.getElementById('goToLogin-btn');
const goToLogin = document.querySelector('.goToLogin');
const goToRegister = document.querySelector('.goToRegister');
const login = document.querySelector('.login');
const register = document.querySelector('.register');
const login_btn = document.querySelector('.login-btn');
const register_btn = document.querySelector('.register-btn');
const login_username_input = document.getElementById('login-username-input');
const login_userpwd_input = document.getElementById('login-userpwd-input');
const register_username_input = document.getElementById('register-username-input');
const register_email_input = document.getElementById('register-email-input');
const register_userpwd_input = document.getElementById('register-userpwd-input');
const register_confirm_userpwd_input = document.getElementById('register-confirm-userpwd-input');


// 设置点击后改变登录与注册的效果
goToRegister_btn.addEventListener('click', function() {
  login.style.visibility = "hidden";
  register.style.visibility = 'visible';
  goToRegister.style.visibility = 'hidden';
  goToLogin.style.visibility = 'visible';
});

goToLogin_btn.addEventListener('click', function() {
  login.style.visibility = 'visible';
  register.style.visibility = "hidden";
  goToRegister.style.visibility = 'visible';
  goToLogin.style.visibility = 'hidden';
})

// 验证注册按钮
register_btn.addEventListener('click', function() {
  // 用来匹配邮箱格式是否正确
  var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  // 由于设置了不刷新，因此每次都要使其输入框的值归零
  if (register_username_input.value === "") {
    alert("用户名不能为空！");
    register_username_input.value = '';
    register_email_input.value = '';
    register_userpwd_input.value = '';
    register_confirm_userpwd_input.value = '';
  } else if(register_email_input.value === "") {
    alert("e-mail不能为空！");
    register_username_input.value = '';
    register_email_input.value = '';
    register_userpwd_input.value = '';
    register_confirm_userpwd_input.value = '';
  } else if(!reg.test(register_email_input.value)) {
    alert("e-mail格式错误！");
    register_username_input.value = '';
    register_email_input.value = '';
    register_userpwd_input.value = '';
    register_confirm_userpwd_input.value = '';
  } else if(register_userpwd_input.value === "") {
    alert("用户密码不能为空！");
    register_username_input.value = '';
    register_email_input.value = '';
    register_userpwd_input.value = '';
    register_confirm_userpwd_input.value = '';
  } else if(register_confirm_userpwd_input.value !== register_userpwd_input.value) {
    alert("两次密码不一致！")
    register_username_input.value = '';
    register_email_input.value = '';
    register_userpwd_input.value = '';
    register_confirm_userpwd_input.value = '';
  } else {
    alert("注册成功！");
    localStorage.setItem(register_username_input.value, register_userpwd_input.value);
    location.reload();
  }
})

// 验证登录按钮
login_btn.addEventListener('click', function() {
  if (login_username_input.value === "") {
    alert("用户名不能为空！");
    login_username_input.value = '';
    login_userpwd_input.value = '';
  } else if(login_userpwd_input.value === "") {
    alert("用户密码不能为空！");
    login_username_input.value = '';
    login_userpwd_input.value = '';
  } else {
    if(localStorage[login_username_input.value] === undefined) {
      alert("未找到该用户！")
      login_username_input.value = '';
      login_userpwd_input.value = '';
    } else {
      for(username in localStorage) {
        if(login_username_input.value === username) {
          if(login_userpwd_input.value !== localStorage[username]) {
            alert("用户名或密码不正确！");
            login_username_input.value = '';
            login_userpwd_input.value = '';
          } else {
            alert("登录成功！");
            window.location.href = './self-introduction.html';
            localStorage.clear(); 
        }
      }
    }
    }
  }
})
</script>

</html>